<template>
  <div class="sum-title-bar">
    <div class="bar-container">
      <div class="bar-row">
        <div class="bar-item">
          <i class="color-horiz-bar"></i>
        </div>
        <div class="bar-item">
          <div class="title-box">
            <div class="title-top">{{ titleTop }}</div>
            <div class="title-bottom">{{ titleBottom }}</div>
          </div>
        </div>
        <div class="bar-item">
          <div class="bar-right">
            <div class="sum-elem">
              <span class="sum-bold-blue">
                <b class="sum-limit" v-html="sumNum"></b>
              </span>
              <span class="sum-small">{{ sumNumUnit }}</span>
            </div>
          </div>
        </div>
        <div class="bar-item big-item">
          <div class="sum-elem big-sum-item">
            <span class="sum-bold-blue">
              <b class="sum-limit"> {{ sumMoney | moneyFormate }}</b>
            </span>
            <span class="sum-small">{{ sumMoneyUnit}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  export default{

    props:{
      barStyleName : {//颜色条的类名
        type: String,
        default : 'default'//默认的类名如 class="color-horiz-bar defaut",该值有传参barStyleName决定
      },

      barTitle : {
        type: String,
        default: '标题条名称'
      },
      titleTop : {
        type: String,
        default: '本月'
      },
      titleBottom : {
        type: String,
        default: '签约'
      },
      sumNum : {
        type: String|Number,
        default: '0'
      },
      sumNumUnit : {
        type: String,
        default: '单'
      },
      sumMoney : {
        type: String|Number,
        default: '0'
      },
      sumMoneyUnit : {
        type: String,
        default: '元'
      },
      more : {
        type: Boolean,
        default: false
      },

      morePath : {
        type: String,
        default: ''
      },
      link: {
        type: Object,
      },
      indicatorStyle: {
        type: Object
      }
    },
    data () {
      return {
        to: {}
      }
    },
    watch: {
      link () {
        this.to = this.link
      }
    },
    components: {

    },
    beforeMount () {
      if (this.link) {
        this.to = this.link
      } else {
        this.to = {path: this.morePath }
      }
    }
  }
</script>


<style lang="less">//使用less预编译语言

  @import "../less/base";

  .sum-title-bar {

    .bar-container {
      display: table;
      background-color: white;
      width: 100%;
      padding: 10px 0;
      border: 1px solid #e4e4e4;
      border-top: none;
      border-right: none;
      white-space: nowrap;
    }

    .bar-row {display: table-row;}

    .big-item {
      width: 100%;
    }

    .bar-item {
      vertical-align: middle;
      display: table-cell;
    }

    .title-box {
      padding: 0 10px 0 8px;
      color: #666666;
      min-width: 62px;
    }

    .color-horiz-bar {
      background-color: #03aaef;
      height: 30px;
      display: block;
      width: 10px;
    }

    .sum-bold-blue {
      font-size: 24px;
      line-height: 20px;
      color: #03aaef;
      // padding: 0 10px;
      // margin-bottom: -20px;
      vertical-align: bottom;
      display: inline-block;
      // max-width: 180px;
      // word-break: break-all;
    }

    .bar-right {
      
    }

    .sum-small {
      color: #999999;
      vertical-align: bottom;
      line-height: 18px;
    }

    .sum-elem {
      margin-right: 4px;
      float: left;
      padding: 4px 0;
    }

    .bar-right {
      overflow: hidden;
      border-left: 1px solid #03aaef;;
      padding-left: 16px;
      float: left;
    }


    .sum-elem {
      float: left;
    }

    .sum-limit {
      text-align: left;
      white-space: initial;
      max-width: 100px;
      display: block;
      overflow: hidden;
      word-wrap: break-word;
    }


    .big-sum-item {
      padding-left: 10px;

      .sum-limit {
        max-width: 170px;
      }
    }
  }
</style>
